CSS @when నియమాన్ని అన్వేషించండి, ఇది బ్రౌజర్ మద్దతు, వ్యూపోర్ట్ సైజు మరియు మరిన్నింటి ఆధారంగా షరతులతో కూడిన స్టైల్ అప్లికేషన్‌ను సాధ్యం చేసే శక్తివంతమైన ఫీచర్. ఆచరణాత్మక ఉదాహరణలతో నేర్చుకోండి.
CSS @when నియమం: షరతులతో కూడిన స్టైల్ అప్లికేషన్‌లో నైపుణ్యం
CSS ప్రపంచం నిరంతరం అభివృద్ధి చెందుతోంది, డెవలపర్‌లకు వెబ్ పేజీలను స్టైల్ చేయడానికి మరింత శక్తివంతమైన మరియు సౌకర్యవంతమైన మార్గాలను అందిస్తోంది. అలాంటి ఫీచర్లలో ఒకటి @when నియమం, దీనిని CSS కండిషనల్ రూల్స్ మాడ్యూల్ లెవల్ 1 అని కూడా పిలుస్తారు. ఈ నియమం నిర్దిష్ట షరతులు నెరవేరినప్పుడు, షరతులతో కూడిన CSS స్టైల్స్‌ను వర్తింపజేయడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇది రెస్పాన్సివ్ డిజైన్, ఫీచర్ డిటెక్షన్, మరియు మరింత పటిష్టమైన మరియు అనుకూలమైన స్టైల్‌షీట్‌లను రూపొందించడానికి ఒక శక్తివంతమైన సాధనం.
CSS @when నియమం అంటే ఏమిటి?
@when నియమం CSSలో ఒక షరతులతో కూడిన ఎట్-రూల్ (at-rule), ఇది కొన్ని షరతులు నిజమైతే మాత్రమే వర్తించే స్టైల్స్‌ను నిర్వచించడానికి మిమ్మల్ని అనుమతిస్తుంది. దీనిని మీ CSS కోసం ఒక if స్టేట్‌మెంట్‌గా భావించండి. మీడియా క్వెరీలు ప్రధానంగా వ్యూపోర్ట్ లక్షణాలపై (స్క్రీన్ పరిమాణం, ఓరియంటేషన్, మొదలైనవి) దృష్టి కేంద్రీకరిస్తాయి, కానీ @when షరతులతో కూడిన స్టైలింగ్‌ను నిర్వహించడానికి మరింత సాధారణ మరియు విస్తరించదగిన మార్గాన్ని అందిస్తుంది. ఇది @supports మరియు @media వంటి ఇప్పటికే ఉన్న షరతులతో కూడిన ఎట్-రూల్స్‌ను విస్తరిస్తుంది.
@when ఉపయోగించడం వల్ల కలిగే ముఖ్య ప్రయోజనాలు
- మెరుగైన కోడ్ రీడబిలిటీ:
@whenబ్లాక్‌లలో షరతులతో కూడిన తర్కాన్ని చేర్చడం ద్వారా, మీ CSSని అర్థం చేసుకోవడం మరియు నిర్వహించడం సులభం అవుతుంది. నిర్దిష్ట స్టైల్ అప్లికేషన్ల వెనుక ఉన్న ఉద్దేశం స్పష్టంగా తెలుస్తుంది. - మెరుగైన ఫ్లెక్సిబిలిటీ:
@whenసాంప్రదాయిక మీడియా క్వెరీల కంటే సంక్లిష్టమైన షరతులను నిర్వహించగలదు, ముఖ్యంగా ఫీచర్ క్వెరీలు మరియు జావాస్క్రిప్ట్-ఆధారిత తర్కంతో (CSS కస్టమ్ ప్రాపర్టీలను ఉపయోగించి) కలిపినప్పుడు. - సరళీకృత ఫీచర్ డిటెక్షన్:
@whenనియమం@supportsతో సజావుగా కలిసిపోతుంది, నిర్దిష్ట బ్రౌజర్ ఫీచర్లు అందుబాటులో ఉన్నప్పుడు మాత్రమే స్టైల్స్‌ను వర్తింపజేయడానికి మిమ్మల్ని అనుమతిస్తుంది. ప్రగతిశీల అభివృద్ధికి (progressive enhancement) ఇది చాలా కీలకం. - మరింత అర్థవంతమైన స్టైలింగ్:
@whenఎలిమెంట్‌లను వాటి స్థితి లేదా సందర్భం ఆధారంగా స్టైల్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది, ఇది మరింత అర్థవంతమైన మరియు నిర్వహించదగిన CSSకి దారితీస్తుంది. ఉదాహరణకు, జావాస్క్రిప్ట్ ద్వారా సెట్ చేయబడిన డేటా అట్రిబ్యూట్‌లు లేదా కస్టమ్ ప్రాపర్టీల ఆధారంగా ఎలిమెంట్‌లను స్టైల్ చేయడం.
@when నియమం యొక్క సింటాక్స్
@when నియమం యొక్క ప్రాథమిక సింటాక్స్ ఈ క్రింది విధంగా ఉంటుంది:
@when <condition> {
/* షరతు నిజమైనప్పుడు వర్తించే CSS నియమాలు */
}<condition> అనేది నిజం లేదా తప్పుగా మూల్యాంకనం చేసే ఏదైనా చెల్లుబాటు అయ్యే బూలియన్ ఎక్స్‌ప్రెషన్ కావచ్చు. ఈ ఎక్స్‌ప్రెషన్‌లో తరచుగా ఇవి ఉంటాయి:
- మీడియా క్వెరీలు: వ్యూపోర్ట్ లక్షణాలపై ఆధారపడిన షరతులు (ఉదా., స్క్రీన్ వెడల్పు, పరికరం ఓరియంటేషన్).
- ఫీచర్ క్వెరీలు (@supports): నిర్దిష్ట CSS ఫీచర్లకు బ్రౌజర్ మద్దతుపై ఆధారపడిన షరతులు.
- బూలియన్ ఆల్జీబ్రా: లాజికల్ ఆపరేటర్లను (
and,or,not) ఉపయోగించి బహుళ షరతులను కలపడం.
ఆచరణలో @when యొక్క ఉదాహరణలు
@when నియమం యొక్క శక్తి మరియు బహుముఖ ప్రజ్ఞను వివరించడానికి కొన్ని ఆచరణాత్మక ఉదాహరణలను అన్వేషిద్దాం.
1. @when మరియు మీడియా క్వెరీలతో రెస్పాన్సివ్ డిజైన్
@when కోసం అత్యంత సాధారణ వినియోగం రెస్పాన్సివ్ డిజైన్, ఇక్కడ మీరు స్క్రీన్ పరిమాణం ఆధారంగా స్టైల్స్‌ను సర్దుబాటు చేస్తారు. మీడియా క్వెరీలు దీన్ని సొంతంగా సాధించగలవు, కానీ @when మరింత నిర్మాణాత్మకమైన మరియు చదవడానికి సులభమైన విధానాన్ని అందిస్తుంది, ముఖ్యంగా సంక్లిష్టమైన షరతులతో వ్యవహరించేటప్పుడు.
@when (min-width: 768px) and (max-width: 1023px) {
body {
font-size: 18px;
line-height: 1.6;
}
.container {
width: 720px;
margin: 0 auto;
}
}ఈ ఉదాహరణలో, @when బ్లాక్‌లోని స్టైల్స్ స్క్రీన్ వెడల్పు 768px మరియు 1023px మధ్య ఉన్నప్పుడు మాత్రమే వర్తిస్తాయి (సాధారణంగా టాబ్లెట్ పరిమాణం). ఇది నిర్దిష్ట వ్యూపోర్ట్ పరిధుల కోసం స్టైల్స్‌ను నిర్వచించడానికి స్పష్టమైన మరియు సంక్షిప్త మార్గాన్ని అందిస్తుంది.
అంతర్జాతీయీకరణ గమనిక: ప్రపంచవ్యాప్త ప్రేక్షకులకు రెస్పాన్సివ్ డిజైన్ చాలా కీలకం. వివిధ ప్రాంతాలలో వేర్వేరు స్క్రీన్ పరిమాణాలను పరిగణించండి. ఉదాహరణకు, కొన్ని దేశాలలో మొబైల్ వినియోగం ఎక్కువగా ఉంటుంది, ఇది మొబైల్-ఫస్ట్ డిజైన్‌ను మరింత కీలకమైనదిగా చేస్తుంది.
2. @when మరియు @supportsతో ఫీచర్ డిటెక్షన్
@whenను @supportsతో కలిపి, ఒక నిర్దిష్ట CSS ఫీచర్‌కు బ్రౌజర్ మద్దతు ఇచ్చినప్పుడు మాత్రమే స్టైల్స్‌ను వర్తింపజేయవచ్చు. ఇది మీ వెబ్‌సైట్‌ను ప్రగతిశీలంగా మెరుగుపరచడానికి అనుమతిస్తుంది, ఆధునిక బ్రౌజర్‌లతో వినియోగదారులకు మెరుగైన అనుభవాన్ని అందిస్తూ, పాత బ్రౌజర్‌లతో అనుకూలతను కొనసాగిస్తుంది.
@when supports(display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
}
@when not supports(display: grid) {
.container {
/* గ్రిడ్‌కు మద్దతు ఇవ్వని బ్రౌజర్‌ల కోసం ఫాల్‌బ్యాక్ స్టైల్స్ */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: calc(50% - 10px); /* పాత బ్రౌజర్‌ల కోసం వెడల్పును సర్దుబాటు చేయండి */
}
}ఇక్కడ, బ్రౌజర్ CSS గ్రిడ్ లేఅవుట్‌కు మద్దతు ఇస్తుందో లేదో తనిఖీ చేయడానికి మనం @supportsను ఉపయోగిస్తాము. ఒకవేళ మద్దతు ఇస్తే, మనం .containerకు గ్రిడ్-ఆధారిత స్టైల్స్‌ను వర్తింపజేస్తాము. లేకపోతే, పాత బ్రౌజర్‌లలో కూడా ఇదే విధమైన లేఅవుట్ సాధించేలా ఫ్లెక్స్‌బాక్స్‌ను ఉపయోగించి ఫాల్‌బ్యాక్ స్టైల్స్‌ను అందిస్తాము.
గ్లోబల్ యాక్సెసిబిలిటీ గమనిక: యాక్సెసిబిలిటీకి ఫీచర్ డిటెక్షన్ ముఖ్యం. పాత బ్రౌజర్‌లలో కొత్త ARIA అట్రిబ్యూట్‌లు లేదా సెమాంటిక్ HTML5 ఎలిమెంట్‌లకు మద్దతు ఉండకపోవచ్చు. కంటెంట్ అందుబాటులో ఉండేలా తగిన ఫాల్‌బ్యాక్‌లను అందించండి.
3. మీడియా క్వెరీలు మరియు ఫీచర్ క్వెరీలను కలపడం
@when యొక్క నిజమైన శక్తి మీడియా క్వెరీలు మరియు ఫీచర్ క్వెరీలను కలిపి మరింత సంక్లిష్టమైన మరియు సూక్ష్మమైన షరతులతో కూడిన స్టైలింగ్ నియమాలను రూపొందించే సామర్థ్యం నుండి వస్తుంది.
@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
.modal {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
}ఈ ఉదాహరణలో, స్క్రీన్ వెడల్పు కనీసం 768px ఉన్నప్పుడు మరియు బ్రౌజర్ backdrop-filter ప్రాపర్టీకి మద్దతు ఇచ్చినప్పుడు మాత్రమే .modal ఎలిమెంట్‌కు బ్లర్ చేయబడిన బ్యాక్‌డ్రాప్ ఉంటుంది. ఇది ఆధునిక బ్రౌజర్‌లలో దృశ్యపరంగా ఆకట్టుకునే ఎఫెక్ట్‌లను రూపొందించడానికి మిమ్మల్ని అనుమతిస్తుంది, అదే సమయంలో పాత బ్రౌజర్‌లలో సంభావ్య పనితీరు సమస్యలు లేదా రెండరింగ్ లోపాలను నివారిస్తుంది.
4. కస్టమ్ ప్రాపర్టీల ఆధారంగా స్టైలింగ్ (CSS వేరియబుల్స్)
@whenను CSS కస్టమ్ ప్రాపర్టీలతో (CSS వేరియబుల్స్ అని కూడా పిలుస్తారు) కలిపి డైనమిక్ మరియు స్టేట్-ఆధారిత స్టైలింగ్‌ను రూపొందించడానికి కూడా ఉపయోగించవచ్చు. మీరు కస్టమ్ ప్రాపర్టీ విలువను నవీకరించడానికి జావాస్క్రిప్ట్‌ను ఉపయోగించవచ్చు, ఆపై ఆ విలువ ఆధారంగా విభిన్న స్టైల్స్‌ను వర్తింపజేయడానికి @whenను ఉపయోగించవచ్చు.
మొదట, ఒక కస్టమ్ ప్రాపర్టీని నిర్వచించండి:
:root {
--theme-color: #007bff; /* డిఫాల్ట్ థీమ్ రంగు */
--is-dark-mode: false;
}
తరువాత, కస్టమ్ ప్రాపర్టీ విలువ ఆధారంగా స్టైల్స్‌ను వర్తింపజేయడానికి @whenను ఉపయోగించండి:
@when var(--is-dark-mode) = true {
body {
background-color: #333;
color: #fff;
}
a {
color: #ccc;
}
}
చివరగా, --is-dark-mode కస్టమ్ ప్రాపర్టీ విలువను టోగుల్ చేయడానికి జావాస్క్రిప్ట్‌ను ఉపయోగించండి:
document.getElementById('darkModeToggle').addEventListener('click', function() {
document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});ఇది వినియోగదారులను లైట్ మరియు డార్క్ థీమ్‌ల మధ్య మారడానికి అనుమతిస్తుంది, కస్టమ్ ప్రాపర్టీ విలువ ఆధారంగా CSS డైనమిక్‌గా నవీకరించబడుతుంది. @whenలో CSS వేరియబుల్స్‌ను నేరుగా పోల్చడం బ్రౌజర్‌లన్నింటిలోనూ సార్వత్రికంగా మద్దతు ఇవ్వకపోవచ్చని గమనించండి. బదులుగా, మీరు సున్నా కాని విలువ కోసం తనిఖీ చేసే మీడియా క్వెరీతో ఒక ప్రత్యామ్నాయాన్ని ఉపయోగించాల్సి రావచ్చు:
@when ( --is-dark-mode > 0 ) { ... }అయితే, ఇది సరిగ్గా పనిచేయడానికి కస్టమ్ ప్రాపర్టీకి సంఖ్యా విలువ ఉందని నిర్ధారించుకోండి.
యాక్సెసిబిలిటీ గమనిక: యాక్సెసిబిలిటీకి ప్రత్యామ్నాయ థీమ్‌లను (ఉదా., డార్క్ మోడ్) అందించడం చాలా కీలకం. దృష్టి లోపాలు ఉన్న వినియోగదారులు అధిక-కాంట్రాస్ట్ థీమ్‌ల నుండి ప్రయోజనం పొందవచ్చు. మీ థీమ్ స్విచ్ కీబోర్డ్ మరియు స్క్రీన్ రీడర్‌ల ద్వారా అందుబాటులో ఉందని నిర్ధారించుకోండి.
5. డేటా అట్రిబ్యూట్‌ల ఆధారంగా స్టైలింగ్
మీరు డేటా అట్రిబ్యూట్‌లతో @whenను ఉపయోగించి ఎలిమెంట్‌లను వాటి డేటా విలువల ఆధారంగా స్టైల్ చేయవచ్చు. ఇది డైనమిక్ ఇంటర్‌ఫేస్‌లను రూపొందించడానికి ఉపయోగపడుతుంది, ఇక్కడ వినియోగదారు పరస్పర చర్య లేదా డేటా నవీకరణల ఆధారంగా ఎలిమెంట్‌ల రూపురేఖలు మారతాయి.
ఉదాహరణకు, మీ వద్ద పనుల జాబితా ఉందని అనుకుందాం, మరియు ప్రతి పనికి దాని స్థితిని సూచించే data-status అట్రిబ్యూట్ ఉంది (ఉదా., "todo", "in-progress", "completed"). ప్రతి పనిని దాని స్థితి ఆధారంగా విభిన్నంగా స్టైల్ చేయడానికి మీరు @whenను ఉపయోగించవచ్చు.
[data-status="todo"] {
/* చేయవలసిన పనుల కోసం డిఫాల్ట్ స్టైల్స్ */
color: #333;
}
@when attribute(data-status string equals "in-progress") {
[data-status="in-progress"] {
color: orange;
font-style: italic;
}
}
@when attribute(data-status string equals "completed") {
[data-status="completed"] {
color: green;
text-decoration: line-through;
}
}గమనిక: attribute() పరీక్ష షరతుకు మద్దతు ప్రస్తుతం అన్ని బ్రౌజర్‌లలో పరిమితంగా ఉండవచ్చు లేదా పూర్తిగా అమలు కాకపోవచ్చు. ఎల్లప్పుడూ క్షుణ్ణంగా పరీక్షించండి.
బ్రౌజర్ అనుకూలత మరియు పాలీఫిల్స్
2024 చివరి నాటికి, @when నియమానికి బ్రౌజర్ మద్దతు ఇంకా అభివృద్ధి చెందుతోంది. అనేక ఆధునిక బ్రౌజర్‌లు కోర్ కార్యాచరణకు మద్దతు ఇస్తున్నప్పటికీ, కొన్ని పాత బ్రౌజర్‌లు ఇవ్వకపోవచ్చు. అందువల్ల, అనుకూలత పట్టికలను తనిఖీ చేయడం మరియు అవసరమైన చోట తగిన ఫాల్‌బ్యాక్‌లు లేదా పాలీఫిల్‌లను ఉపయోగించడం చాలా ముఖ్యం.
@when మరియు సంబంధిత ఫీచర్ల ప్రస్తుత బ్రౌజర్ మద్దతు స్థితిని తనిఖీ చేయడానికి ఎల్లప్పుడూ Can I use... వంటి వనరులను సంప్రదించండి.
@when ఉపయోగించడానికి ఉత్తమ పద్ధతులు
- షరతులను సరళంగా ఉంచండి:
@whenబ్లాక్‌లలో అధిక సంక్లిష్టమైన షరతులను నివారించండి. సంక్లిష్టమైన తర్కాన్ని చిన్న, మరింత నిర్వహించదగిన భాగాలుగా విభజించండి. - ఫాల్‌బ్యాక్‌లను అందించండి: మీరు మీ
@whenనియమాలలో ఉపయోగిస్తున్న ఫీచర్లకు మద్దతు ఇవ్వని బ్రౌజర్‌ల కోసం ఎల్లప్పుడూ ఫాల్‌బ్యాక్ స్టైల్స్‌ను అందించండి. ఇది వివిధ బ్రౌజర్‌లలో స్థిరమైన అనుభవాన్ని నిర్ధారిస్తుంది. - క్షుణ్ణంగా పరీక్షించండి: మీ
@whenనియమాలు ఆశించిన విధంగా పనిచేస్తున్నాయని నిర్ధారించుకోవడానికి మీ CSSను వివిధ బ్రౌజర్‌లు మరియు పరికరాలలో పరీక్షించండి. - అర్థవంతమైన వ్యాఖ్యలను ఉపయోగించండి: ప్రతి
@whenనియమం యొక్క ఉద్దేశ్యం మరియు అది ఆధారపడిన షరతులను వివరించడానికి మీ CSSకు వ్యాఖ్యలను జోడించండి. ఇది మీ కోడ్‌ను అర్థం చేసుకోవడానికి మరియు నిర్వహించడానికి సులభతరం చేస్తుంది. - పనితీరును పరిగణించండి:
@whenనియమాలను అధికంగా ఉపయోగించడాన్ని నివారించండి, ఎందుకంటే అవి పనితీరును ప్రభావితం చేయవచ్చు. మూల్యాంకనం చేయవలసిన నియమాల సంఖ్యను తగ్గించడానికి మీ CSSను ఆప్టిమైజ్ చేయండి.
ముగింపు
@when నియమం CSS టూల్‌బాక్స్‌కు ఒక శక్తివంతమైన చేరిక, ఇది డెవలపర్‌లకు షరతులతో కూడిన స్టైల్స్‌ను వర్తింపజేయడానికి మరింత సౌకర్యవంతమైన మరియు వ్యక్తీకరణ మార్గాన్ని అందిస్తుంది. మీడియా క్వెరీలు, ఫీచర్ క్వెరీలు మరియు CSS కస్టమ్ ప్రాపర్టీలతో దీన్ని కలపడం ద్వారా, మీరు మరింత పటిష్టమైన, అనుకూలమైన మరియు నిర్వహించదగిన స్టైల్‌షీట్‌లను సృష్టించవచ్చు. బ్రౌజర్ మద్దతు ఇంకా అభివృద్ధి చెందుతున్నప్పటికీ, @when అనేది మీ ఆధునిక వెబ్ డెవలప్‌మెంట్ వర్క్‌ఫ్లోలో అన్వేషించడానికి మరియు చేర్చడానికి విలువైన ఫీచర్.
వెబ్ అభివృద్ధి చెందుతున్న కొద్దీ, ప్రపంచవ్యాప్తంగా ఉన్న వినియోగదారులకు ఆకర్షణీయమైన, అందుబాటులో ఉండే మరియు అధిక-పనితీరు గల అనుభవాలను సృష్టించడానికి @when వంటి ఫీచర్లలో నైపుణ్యం సాధించడం చాలా అవసరం. షరతులతో కూడిన స్టైలింగ్ యొక్క శక్తిని స్వీకరించండి మరియు మీ CSS డెవలప్‌మెంట్‌లో కొత్త అవకాశాలను అన్‌లాక్ చేయండి.